import React from 'react'
import {withRouter,} from 'react-router-dom'
import constants from "../../utils/constants";
import {Icon, NavBar, Toast} from "antd-mobile";
import CustomButton from "../../shared-components/CustomButton/CustomBotton";
import {getPlanProDetailReq, getPlanProListReq,} from "../../apis/goApis";
import defaultAvatarSrc from '../../res/images/web/pro_apply/专家头像@2x.png'
import LocalStorageService from "../../utils/LocalStorageService";
import addPlanSrc from "../../res/images/web/pro_apply/发表@2x.png"
import {cleanPlanData} from "../game-room/components/Main/plan/plan";
import './my_pro_plan_page.css'
import MyProPlanItem from "./my-pro-plan-item/my-pro-plan-item";
import PlanProDetail from "./plan-pro-detail/plan-pro-detail";

class MyProPlanPage extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
    }

    render() {
        return <PlanProDetail
            uid={this.uid}
            isUser
        />
    }

    // componentDidMount() {
    //     this.getUserDetail()
    //         .then(() => (this.getProList()))
    // }
    //
    // getUserDetail() {
    //     return getPlanProDetailReq({
    //         Uid: this.uid,
    //     }, true)
    //         .then((resp) => {
    //             let user = resp.data.ok
    //             if (user) {
    //                 let [goodAtType, goodAtEvent,] = user.Goodat
    //                 this.setState({
    //                     avatarSrc: user.Iconurl ? user.Iconurl : defaultAvatarSrc,
    //                     nickname: user.Nickname,
    //                     goodAtType: goodAtType ? goodAtType : '',
    //                     goodAtEvent: goodAtEvent ? goodAtEvent : '',
    //                     txt: user.Specialisttxt,
    //                 })
    //             }
    //         })
    // }
    //
    // getProList() {
    //     return getPlanProListReq({
    //         P: this.state.p,
    //         Flag: this.state.type,
    //         Uid: this.uid,
    //     })
    //         .then((resp) => {
    //             if (resp.data.gs) {
    //                 let list = [...this.state.list, ...resp.data.gs.map(data => cleanPlanData(data)),]
    //                 let count = resp.data.count
    //                 let end = list.length === count[this.state.tabActiveIndex]
    //                 this.setState({
    //                     count,
    //                     list,
    //                     rate: resp.data.rate,
    //                     end,
    //                 })
    //             }
    //         })
    // }
    //
    // getNextPageProList() {
    //     if (this.state.end) {
    //         Toast.info('已经没有数据', 1)
    //     } else {
    //         this.setState({
    //             p: this.state.p + 1,
    //         }, () => {
    //             this.getProList()
    //         })
    //     }
    // }
    //
    // onTabClick(index) {
    //     this.setState({
    //         tabActiveIndex: index,
    //         list: [],
    //         p: 0,
    //         type: [1, 3, 2,][index],
    //     }, () => {
    //         this.getProList()
    //     })
    // }
    //
    // onListScroll() {
    //     let ctn = this.listContainer
    //     const contentHeight = ctn.scrollHeight
    //     const top = ctn.scrollTop
    //     const reachBottom = top === contentHeight - ctn.clientHeight
    //     if (reachBottom) {
    //         this.getNextPageProList()
    //     }
    // }
    //
    // onDelete = (planItem) => {
    //     const index = this.state.list.findIndex(p => p.id === planItem.id)
    //     const list = [...this.state.list,]
    //     const count = this.state.count
    //     const free = planItem.Price === 0
    //     if (free) {
    //         count[1]--
    //     } else {
    //         count[2]--
    //     }
    //     count[0]--
    //     list.splice(index, 1)
    //     this.setState({
    //         list,
    //         count: [...count,],
    //     })
    // }
    //
    // render() {
    //
    //     const editButton = <CustomButton
    //         size='small'
    //         bg='#FFA500'
    //         extrastyle={{
    //             alignItems: 'center',
    //         }}
    //         onClick={() => this.props.history.push('./add-plan')}
    //     >
    //         <img src={addPlanSrc} alt="" style={{width: '14px', height: '14px', marginRight: '6px',}}/>
    //         <span>写方案</span>
    //     </CustomButton>
    //
    //     const tagTextStyle = {
    //         border: '1px solid rgba(255, 255, 255, 0.4)',
    //         fontSize: '12px',
    //         lineHeight: '16px',
    //         padding: '0 2px',
    //         color: 'rgba(255, 255, 255, 0.5)',
    //     }
    //
    //     return <>
    //         <NavBar
    //             style={{backgroundColor: `${constants.themeColor}`}}
    //             leftContent={<Icon type='left' size='lg'/>}
    //             onLeftClick={() => {this.props.history.goBack()}}
    //             rightContent={editButton}
    //         >
    //             <p>我的主页</p>
    //         </NavBar>
    //         <div
    //             style={{
    //                 padding: '8px 16px 12px',
    //                 backgroundColor: `${constants.themeColor}`,
    //             }}
    //             onClick={() => this.props.history.push('./set_pro_detail')}
    //         >
    //             <div className='flex-space-between-align-center mg-b-12px'>
    //                 <div className='flex-align-center'>
    //
    //                     <div
    //                         style={{
    //                             width: '48px',
    //                             height: '48px',
    //                             borderRadius: '50%',
    //                             background: `no-repeat url(${this.state.avatarSrc}) 50% 50%/cover, #fff`,
    //                             marginRight: '12px',
    //                         }}
    //                     />
    //
    //                     <div>
    //                         <div className='flex-align-center mg-b-8px'>
    //                         <span
    //                             style={{
    //                                 color: '#fff',
    //                                 fontSize: '16px',
    //                                 lineHeight: '16px',
    //                                 marginRight: '4px',
    //                             }}
    //                         >{this.state.nickname}</span>
    //                             <span
    //                                 style={{
    //                                     color: '#fff',
    //                                     fontSize: '12px',
    //                                     lineHeight: '16px',
    //                                     background: '#36C8B9',
    //                                     padding: '0 4px',
    //                                 }}
    //                             >
    //                             近{this.state.rate[1]}场中{this.state.rate[0]}
    //                         </span>
    //                         </div>
    //                         <div>
    //                         <span
    //                             style={{
    //                                 ...tagTextStyle,
    //                                 marginRight: '6px',
    //                             }}
    //                         >
    //                             {this.state.goodAtEvent}
    //                         </span>
    //                             <span
    //                                 style={{
    //                                     ...tagTextStyle,
    //                                 }}
    //                             >
    //                             {this.state.goodAtType}
    //                         </span>
    //                         </div>
    //                     </div>
    //
    //                 </div>
    //
    //                 <Icon type='right' size='xs' color='#fff'/>
    //             </div>
    //
    //             <div
    //                 style={{
    //                     fontSize: '12px',
    //                     color: 'rgba(255, 255, 255, 0.5)',
    //                     lineHeight: '16px',
    //                 }}
    //             >
    //                 <span>
    //                    简介：
    //                 </span>
    //                     <span>
    //                     {this.state.txt}
    //                 </span>
    //             </div>
    //
    //         </div>
    //
    //         <div className="flex-space-between-align-center" style={{padding: '12px 16px'}}>
    //             <p
    //                 style={{
    //                     fontSize: '16px',
    //                     lineHeight: '22px',
    //                 }}
    //             >方案</p>
    //             <div className='flex'>
    //                 {this.state.tabs.map((tab, index) => {
    //                     const active = index === this.state.tabActiveIndex
    //                     const gap = <span
    //                         style={{padding: '0 8px',}}
    //                     >|</span>
    //                     return <div
    //                         style={{
    //                             color: 'rgba(66, 66, 66, 0.4)',
    //                         }}
    //                         key={index}
    //                         onClick={() => this.onTabClick(index)}
    //                     >
    //                         <span
    //                             style={{
    //                                 color: active ? '#FFA500' : '',
    //                                 marginRight: '8px',
    //                             }}
    //                         >
    //                             {tab}
    //                         </span>
    //                         <span style={{color: active ? '#FFA500' : '',}}>
    //                             {this.state.count[index] || 0}
    //                         </span>
    //                         {index !== 2 ? gap : null}
    //                     </div>
    //                 })}
    //             </div>
    //         </div>
    //
    //         <div
    //             style={{
    //                 height: window.innerHeight - 96 - 45 - 46,
    //                 overflowY: 'scroll',
    //             }}
    //             onScroll={() => this.onListScroll()}
    //             ref={el => this.listContainer = el}
    //         >
    //             {this.state.list.map((data, index) => <MyProPlanItem
    //                 key={index}
    //                 planData={data}
    //                 onDelete={this.onDelete}
    //             />)}
    //         </div>
    //     </>
    // }
}

export default withRouter(MyProPlanPage)